<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="Description" content="华山牧创新创意营销大赛" />
		<meta name="Keywords" content="华山牧创新创意营销大赛" />
		<meta name="author" content="Tencent-TGideas">
		<link href="webpages/wx/zkly2/css/huadong.css" rel="stylesheet" media="all">
		<title>华山牧创新创意营销大赛</title>
	</head>
	
	<style>
	.imgClass {
			    width: 80%;
		    position: absolute;
		    top: 36px;
		    left: 10%;
		    z-index: 2;
		}
		
		.txtTop {
			text-align: center;
		}
		
		.txtTopZi {
			position: absolute;
			z-index: 200;
			left: 20%;
			font-size: 30px;
			top: 36px;
			width: 60%;
		}
		
		div.txt9 {
			position: absolute;
			height: 20%;
			top: 14%;
			/*width: 90%;*/
			left: -10px;
		}
		
		div.txt9 ul {
			width: 100%;
		}
		
		div.txt9 ul li {
			height: 100px;
			width: 19%;
			float: left;
			padding: 7px;
			position: relative;
			left: -20px;
		}
		
		div.txt9 ul li img {
			width: 75px;
			height: 99px;
			border: 3px solid yellow;
			border-radius: 6px;
		}
		
		div.txt9 ul li span {
			text-align: center;
			text-overflow: ellipsis;
			padding-left: 10px;
			white-space: nowrap;
			display: inherit;			
		}
		div.txt9 ul li div {
			text-align: center;
		    text-overflow: ellipsis;
		    padding-left: 5px;
		    white-space: nowrap;
		    overflow: hidden;
		    width: 78px;
		}
		
		
		.end-history {
			position: absolute;
			height: 30%;
			top: 69%;
			left: 15px;
			width: 90%;
			background: url(webpages/wx/zkly2/img/history.png) center top no-repeat;
			background-size: 100% auto;
		}
		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
		
		::-webkit-scrollbar {
			width: 10px;
			height: 10px;
			background-color: #44A9D7;
		}
		/*定义滚动条轨道 内阴影+圆角*/
		
		::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
			border-radius: 10px;
			background-color: #44A9D7;
		}
		/*定义滑块 内阴影+圆角*/
		
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
			background-color: #7CD5FF;
		}
		
		.div_parent {
			overflow-y: hidden;
			overflow-x: auto;
			white-space: nowrap;
			top: 25px;
			position: relative;
			border-radius: 15px;
		}
		
		.div_child {
			width: 90px;
			height: 115px;
			border-left: 2px solid #E8F4FA;
			display: inline-block;
			text-align: center;
		}
		
		.div_child img {
			position: relative;
			top: 33px;
			width: 30px;
		}
		
		.div_child .p1 {
			position: absolute;
			top: 60px;
			z-index: 2;
			margin-left: 6px;
		}
		
		.div_child .d {
			position: absolute;
			top: 10px;
			font-weight: 800
		}
	</style>

	<body onload="init();">
		<div class="wrap" id="scene">
			<h1>华山牧创新创意营销大赛</h1>
			<div class="sec">
				<div class="bg">
					<div class="bg_sec bg04"></div>
				</div>
				<section class="sec05" style="display:;">
					<div class="backBtn">
						<a href="indexZkly2.action?curPage=2"><img src="webpages/wx/zkly2/img/backBtn.png" style="float: right;" /></a>
					</div>
					<div class="txtTop">
						<img class="imgClass" src="webpages/wx/zkly2/img/topTopic.png" />
						<div class="txtTopZi">${(team.teamName)!}</div>
					</div>
					<div class="txt9">
						<ul>
							<#if team??&&(team.memberItems)??>
							<#list team.memberItems as item>
							<#if item_index <4>
							<li>
								<img class="mui-media-object mui-pull-left" src="${(item.imgUrl)!''}" onerror="this.src='webpages/wx/zkly2/img/shuijiao.jpg'">
								<div>${(item.name)!}</div>
								<div style="font-size: 13px;">${(item.major)!}</div>
							</li>
							</#if>
							</#list>
							</#if>
						</ul>
					</div>
					<div class="txt9" style="top: 37%;">
						
						<#if team??&&(team.memberItems)??>
						<ul>
						<#list team.memberItems as item>
						<#if (item_index >3)&&(item_index <8)>
						<li>
							<img class="mui-media-object mui-pull-left" src="${(item.imgUrl)!''}" onerror="this.src='webpages/wx/zkly2/img/shuijiao.jpg'">
							<span>${(item.name)!}</span>
							<span style="font-size: 13px;">${(item.major)!}</span>
						</li>
						</#if>
						</#list>
						
						</ul>
						</#if>
					</div>
					<div class="end-history">
						<div class="div_parent">
							<div class="div_child">
								<span class="d">今日</span>
								<span class="p1">${(today.dayCount)!0}</br>瓶</span>
								<img src="webpages/wx/zkly2/img/jrxl.png" />
							</div>
							<#list otherdays as od>
							<div class="div_child">
								<span class="d">${(od.showTag)!''}</span>
								<span class="p1">${(od.dayCount)!0}</br>瓶</span>
								<img src="webpages/wx/zkly2/img/mrxl.png" />
							</div>
							</#list>
						</div>
					</div>
				</section>

			</div>

	</body>
	<script src="webpages/wx/zkly2/js/parallax.js"></script>
	<!-- <script src="webpages/wx/zkly2/js/zepto.min.js"></script> -->
	<script src="webpages/wx/zkly2/js/ping_tcss_ied.js"></script>
	<script src="webpages/wx/zkly2/js/jquery-1.12.4.min.js"></script>
	<script src="webpages/wx/zkly2/js/ajaxfileupload.js"></script>
	<script>
		// 翻转的绑定
		window.onorientationchange = orientationChange;

		function initPage() {
			pageWidth = $(window).width();
			pageHeight = $(".wrap").height();
			pages = $(".wrap section");
			$(".bg .bg_sec").css("height", pageHeight);
			var bg_sec_height = $('.bg .bg_sec').height();
			$(".svg").css("height", bg_sec_height * 8);

			$(".wrap section").css({
				"width": pageWidth + "px", //"height":$(".wrap").height()+"px"
				"height": pageHeight + "px"
			});
			//$(".wrap").height($(".wrap").height());

			secHeight = pageHeight * $(".wrap section").length;
			lineHeight = 832 * secHeight / pageHeight;

			$(".sec, .line").addClass("drag");
			animatePage(curPage);
			//$(".sec, .line").removeClass("drag");

		}

		function orientationChange() {
			initPage();
		}

		// 以下是拖动效果
		var startX = 0,
			startY = 0;
		margin = 0;
		var pages = null;
		var curPage = 4;
		var pageWidth = 0,
			pageHeight = 0;
		var lineHeight = 0,
			secHeight = 0;
		var targetElement = null;
		var scrollPrevent = false,
			movePrevent = false,
			touchDown = false;

		$(document).ready(function() {
			initPage();
		});

		function prevPage() {
			var newPage = curPage - 1;
			animatePage(newPage);
			//     alert('上一页，当前页：'+curPage);

		}

		function nextPage() {
			var newPage = curPage + 1;

			//     alert('下一页，当前页：'+curPage);
			var check = true;
			if(curPage == 3) {
				//判断是否上传图片和宣言信息
				// 		var imgUrl = $('#imgUrl').val();
				// 		var speak = $('#speak').val();
				// 		if(!imgUrl) {
				// 			check = false;
				// 			alert('请上传照片');
				// 		} else if(!speak) {
				// 			check = false;
				// 			alert('请填写宣言');
				// 		}

			}

			//
			if(curPage == 4) {

			}

			if(check) {
				animatePage(newPage);
			} else {
				animatePage(curPage);
			}

		}

		function animatePage(newPage) {
			if(newPage < 0) {
				newPage = 0;
			}
			if(newPage > $(".wrap section").length - 1) {
				newPage = $(".wrap section").length - 1;
			}

			curPage = newPage;
			var newMarginTop = newPage * (-pageHeight);
			$(".sec").css({
				"-webkit-transform": "matrix(1, 0, 0, 1, 0, " + newMarginTop + ")"
			});

			var newTop = -parseInt(curPage * pageHeight * (lineHeight / secHeight));
			$(".line").css({
				"-webkit-transform": "matrix(1, 0, 0, 1, 0, " + newTop + ")"
			});

			movePrevent = true;
			setTimeout("movePrevent=false;", 300);

			// 每页动画
			if(!$(pages[curPage]).hasClass("sec0" + (curPage + 1) + "_show")) {
				$(pages[curPage]).addClass("sec0" + (curPage + 1) + "_show");
			}
			$(pages[curPage - 1]).removeClass("sec0" + (curPage) + "_show");
			$(pages[curPage + 1]).removeClass("sec0" + (curPage + 2) + "_show");

		}

		// 视差
		var scene = document.getElementById('scene');
		var parallax = new Parallax(scene);

		//map
		var init = function() {}
		//执行
		document.addEventListener('WeixinJSBridgeReady', function() {
			//     onBridgeReady();
		});
	</script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script>
		/***用户打开页面的时候就加载**/
		setWxConfig();

		function setWxConfig() {
			//通过config接口注入权限验证配置
			wx.config({
				debug: false,
				appId: '${appId}',
				timestamp: '${timestamp}',
				nonceStr: '${nonceStr}',
				signature: '${signature}',
				jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
			});

			var titleWx = "华山牧创新创意营销大赛";
			var descWx = "华山牧创新创意营销大赛销量统计";
			var imgUrlWx = "http://www.jmax4you.com/jmax/img/bg_04_05.png";
			var linkWx = "http://www.jmax4you.com/jmax/indexZkly2.action";

			wx.ready(function() {
				//分享给朋友
				wx.onMenuShareAppMessage({
					title: titleWx + '', // 分享标题
					desc: descWx + '', // 分享描述
					link: linkWx + '', // 分享链接
					imgUrl: imgUrlWx + '', // 分享图标
					success: function() {
						// 用户确认分享后执行的回调函数
						// 	        successFcWx();
					},
					cancel: function() {
						// 用户取消分享后执行的回调函数
						// 	        cancleFcWx();
					}
				});

				//分享到朋友圈
				wx.onMenuShareTimeline({
					title: titleWx, // 分享标题
					link: linkWx, // 分享链接
					imgUrl: imgUrlWx, // 分享图标
					success: function() {
						// 用户确认分享后执行的回调函数
					},
					cancel: function() {
						// 用户取消分享后执行的回调函数
					}
				});

				//分享到QQ
				wx.onMenuShareQQ({
					title: titleWx, // 分享标题
					desc: descWx, // 分享描述
					link: imgUrlWx, // 分享链接
					imgUrl: imgUrlWx, // 分享图标
					success: function() {
						// 用户确认分享后执行的回调函数
						// 	    	successFcWx();
					},
					cancel: function() {
						// 用户取消分享后执行的回调函数
						// 	    	cancleFcWx();
					}
				});
			});

		}
	</script>

</html>